<template>
	<view class="content">
		<!-- <view class="new-head">
			<AllHeads name="邀请好友" :type="type"></AllHeads>
		</view> -->
		<view class="bgImg">
			<image src="../../static/friends/friends1.png" mode="widthFix"></image>

		</view>
		<view class="paddingFrame">
			<view class="friends-head">
				<text class="head-Ttext">我的邀请码</text>
			</view>
			<view class="friends-qrcode">
				<view class="code">
					<view class="txt">
						{{Info.inviteCode}}
					</view>
					<view class="copy" @click="copyUrl">
						复制
					</view>
				</view>
				<view class="qrcode">
					<image :src="qrcode" mode="widthFix" class="qrcode_img"></image>
					<!-- 	<ikun-qrcode width="360" height="360" color="#000000" unit="rpx" :data="QRCodeContent"
						class="qrCode-sty" /> -->
				</view>
			</view>
			<view class="friends-head">
				<text class="head-Ttext">分享链接</text>
			</view>
			<view class="friends-area">
				<text ref="areaTxt" class="area-p"
					id="area_p">我用【美传】，网购更省钱~邀请码:∞{{Info.inviteCode}}∞下载:https://sj.mc.com/appdetail/com.jf.lkrj</text>
			</view>

			<view class="friends-button">
				<view class="btnGroup">
					<button class="button-btn" @click="copyText">复制分享链接</button>
					<!-- #ifdef APP-PLUS -->
					<button class="button-btn" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')">保存邀请二维码</button>
					<!-- #endif -->

					<!-- #ifndef APP-PLUS -->
					<button class="button-btn" @click="copyImg">保存邀请二维码</button>
					<!-- #endif -->
				</view>
				<view class="button-p">
					<text class="p-p">
						好友下载APP并使用你的邀请码成功注册后，Ta将成为你的粉丝
					</text>
				</view>
			</view>
		</view>

		<permission-popup ref="authpup" type="top" @changeAuth="changeAuth"
			:permissionID="permissionID"></permission-popup>
	</view>
</template>

<script>
	import permissionPopup from "@/components/permission-popup/permission-popup";
	// import { getCurrentInstance } from 'vue';
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		storeQRcode
	} from "@/api/apis.js"
	export default {
		components: {
			permissionPopup
		},
		data() {
			return {
				type: 'arrow-left',
				code: 'ASDFGH',
				codeStr: '',
				qrcode: '../../static/friends/friends2.png',
				QRCodeContent: '',
				permissionID: "",
			};
		},
		computed: {
			...mapState("userInfo", ["Info"]),
		},
		mounted() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				let params = {
					invitationCode: this.Info.inviteCode,
					type: 0, //邀请类型 0、用户邀请 1、店铺邀请
				}
				storeQRcode(params).then((res) => {
					this.qrcode = res.result
				})
			},
			//打开自定义权限目的弹框
			openAuth(permissionID) {
				if (plus.os.name == 'Android') {
					this.permissionID =
					permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
					setTimeout(() => {
						this.$refs['authpup'].open();
					}, 500)
				} else {
					this.copyImg()
				}
			},

			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
				this.copyImg() //调用相册功能
			},

			copyImg() {
				// 下载图片
				uni.downloadFile({
					url: this.qrcode,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
								filePath: res.tempFilePath, //图片文件路径
								success: function() {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none',
									});
								},
								fail: function(e) {
									console.log(e);
									uni.showToast({
										title: '图片保存失败',
										icon: 'none',
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			},
			copyUrl() {
				uni.setClipboardData({
					data: this.Info.inviteCode,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},

			copyText() {
				let text = `我用【美传】，网购更省钱~邀请码:∞${this.Info.inviteCode}∞下载:https://sj.mc.com/appdetail/com.jf.lkrj`
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},



		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		// height: 100vh;
		background-color: #FDE9BF;
		// padding: 25rpx;
		padding-bottom: 30rpx;

		.new-head {
			width: 100%;
			padding: 50rpx 0 30rpx 0;
		}

		.bgImg {
			width: 100%;
			// height: 1150rpx;

			image {
				width: 100%;
				// height: 100%;
			}
		}

		.paddingFrame {
			padding: 0 25rpx;

			.friends-head {
				margin-bottom: 25rpx;
				text-align: center;

				.head-Ttext {
					font-size: 30rpx;
					font-weight: 600;
					display: block;
				}
			}

			.friends-qrcode {
				// width: 52%;
				width: 400rpx;
				height: 480rpx;
				// width: auto;
				background-color: #fff;
				border-radius: 30rpx;
				margin: 0 auto;
				padding: 30rpx 0;
				margin-bottom: 30rpx;

				.code {
					width: 70%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 0 auto;
					margin-bottom: 30rpx;

					.txt {
						// font-weight: bold;
						font-size: 35rpx;
					}

					.copy {
						border-radius: 25rpx;
						border: 1px solid $uni-text-color-red;
						color: $uni-text-color-red;
						font-size: 23rpx;
						padding: 5rpx 20rpx;
					}
				}

				.qrcode {
					width: 400rpx;
					text-align: center;

					image {
						height: 360rpx;
						width: 360rpx;
					}
				}
			}

			.friends-area {
				// padding: 30rpx 30rpx 240rpx 30rpx;
				padding: 30rpx 30rpx 30rpx 30rpx;
				background-color: #f7f7f7;
				border-radius: 30rpx;
				line-height: 50rpx;
				color: #757575;

				.area-p {
					word-wrap: break-word;
					font-size: 25rpx;
				}
			}

			.friends-button {
				margin-top: 30rpx;

				.btnGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.button-btn {
						width: 48%;
						background: linear-gradient(to right, #ff2b28, #fd6e2b);
						color: white;
						height: 70rpx;
						border-radius: 70rpx;
						line-height: 70rpx;
						font-size: 28rpx;
						margin: 0;
					}
				}

				.button-p {
					text-align: center;
					// width: 95%;
					// display: block;
					margin-top: 30rpx;

					.p-p {
						// width: 95%;
						margin: 0 auto;
						display: block;
						font-size: 25rpx;
					}
				}

			}
		}
	}
</style>